@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* You can add global styles to this file, and also import other style files */

@layer base {
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  :root {
    --font-sans: 'Satoshi';
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --border: 220 13% 91%;
    --border-300: 212, 14%, 79%;
    --input: 220 13% 91%;
    --ring: 209 85% 57%;
    --radius: 0.75rem;
    --editor-background: 227 40% 98%;
    --editor-shadow-color: 228, 29%, 79%, 0.5;

    --primary: 252 88% 14%;
    --primary-100: 204 38% 75%;
    --primary-200: 239 65% 61%;
    --primary-300: 250 75% 12%;
    --primary-400: 250 72% 11%;
    --primary-800: 250 72% 11%;
    --primary-foreground: 210 20% 98%;

    --green-accent: 83 97% 66%;
    --green-accent-100: 77 88% 90%;
    --green-accent-200: 141 93% 77%;
    --green-accent-300: 111 62% 57%;

    --blue-50: 221 44% 93%;
    --blue-accent: 209 85% 57%;
    --blue-accent-100: 233 80% 98%;
    --blue-accent-200: 251, 22%, 29%;
    --blue-accent-300: 209, 85%, 57%;
    --blue-accent-400: 206, 94%, 81%;
    --blue-accent-500: 209 85% 57%; /* Primary Blue accent from Figma */

    --grey-blue-50: 240 100% 98%;
    --grey-blue: 213 28% 67%;

    --destructive-100: 0 84.2% 90%;
    --destructive: 0 84.2% 60.2%;
    --destructive-300: 0 84.2% 40%;
    --destructive-400: 356 90% 68%;

    --success-100: 148 48% 90%;
    --success: 148 48% 46%;
    --success-300: 148 48% 40%;
    --success-400: 148 72% 57%;

    --warning: 47 96% 53%;
    --warning-50: 28 94% 93%;
    --warning-100: 51.72, 93.55%, 93.92%;
    --warning-200: 35 100% 51%;
    --warning-300: 28 80% 31%;
    --warning-400: 5 81% 56%;
    --add-button-shadow: 0px 0px 0px 6px hsl(var(--primary-100));
    --sidebar-shadow-color: 0, 0, 0, 0.1;

    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;

    --background-800: 209 85% 98%; /* BG-800 from Figma */
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --editor-background: 224 70% 6%;
    --editor-shadow-color: 228, 29%, 79%, 0.2;

    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --border-300: 212, 14%, 30%;
    --input: 215 27.9% 16.9%;
    --ring: 263.4 70% 50.4%;

    --primary: 0 0% 100%;
    --primary-100: 204 38% 75%;
    --primary-200: 239 65% 61%;
    --primary-300: 265 79% 71%;
    --primary-foreground: 210 20% 98%;
    --primary-800: 265 66% 80%;

    --green-accent: 133 68% 64%;
    --green-accent-100: 77 88% 90%;
    --green-accent-200: 141 93% 50%;
    --green-accent-300: 111 62% 57%;

    --blue-50: 221 44% 93%;
    --blue-accent: 209 85% 57%;
    --blue-accent-100: 233 80% 98%;
    --blue-accent-200: 251, 22%, 29%;
    --blue-accent-300: 209, 85%, 57%;

    --grey-blue-50: 240 100% 10%;
    --grey-blue: 213 28% 67%;

    --destructive-100: 0 73.7% 41.8%;
    --destructive: 0 84.2% 60.2%;
    --destructive-300: 0 96.3% 89.4%;

    --success-100: 166 97% 20%;
    --success: 166 97% 14%;
    --success-300: 166 97% 60%;

    --warning: 47 96% 53%;
    --warning-50: 28 94% 93%;
    --warning-100: 51.72, 93.55%, 17.92%;
    --warning-300: 52 96% 70%;
    --warning-400: 5 81% 56%;
    --add-button-shadow: 0px 0px 0px 6px hsl(var(--primary-100) / 0.5);

    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;

    --sidebar-shadow-color: 255, 255, 255, 0.05;

    --background-800: 224 71.4% 4.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: 'rlig' 1, 'calt' 1;
    pointer-events: auto !important;
  }
}

.ol-responsive-margins > li {
  margin-left: 1.5rem;
}
.ol-responsive-margins > li:nth-child(n + 10) {
  margin-left: 2rem;
}
.ol-responsive-margins > li:nth-child(n + 100) {
  margin-left: 2.5rem;
}
.ol-responsive-margins > li:nth-child(n + 1000) {
  margin-left: 3rem;
}
